<template>
  <div class="content-wrap" id="wrap">
    <el-image style="width: 100%; height: 100%" :src="src" fit="fill" usemap="#Map" id="qw"></el-image>
    <map name="Map" id="Map">
      <!-- <area id="1001" shape="circle" coords="1084,336,30" href="javascript:void(0)" @click="handlerFloor('1幢')" />
      <area id="1002" shape="circle" coords="847,585,30" href="javascript:void(0)" @click="handlerFloor('1幢')" />
      <area id="1003" shape="circle" coords="1329,472,30" href="javascript:void(0)" @click="handlerFloor('1幢')" />
      <area id="1004" shape="circle" coords="920,756,30" href="javascript:void(0)" @click="handlerFloor('1幢')" />
      <area id="1005" shape="circle" coords="1356,665,30" href="javascript:void(0)" @click="handlerFloor('1幢')" />
      
      <area id="1006" shape="circle" coords="1200,801,30" href="javascript:void(0)" @click="handlerFloor('1幢')" /> -->


      <area v-for="item in deviceList" :key="item.deviceNumber" shape="circle" :coords="item.position" href="javascript:void(0)" @click="show(item.deviceNumber)" />


    </map>

    <el-dialog :title="设备详情" :visible.sync="dialogFormVisible" @close="closeDialog">
      <el-form :model="formData"  label-position="left" label-width="100px">
        <el-row>
          <el-form-item label="设备编号">
            <el-input v-model="formData.deviceNumber" readonly></el-input>

          </el-form-item>
        </el-row>
        
            <el-form-item label="设备名称">
              <el-input type="text" v-model="formData.deviceName" readonly></el-input>

            </el-form-item>

            <el-form-item label="布防状态">
              <el-select  v-model="formData.garrisonStatus" readonly>
              <el-option value="0" label="布防">布防</el-option>
              <el-option value="1" label="撤防">撤防</el-option>
            </el-select>
            </el-form-item>
       

        <el-form-item label="设备状态">
            <el-select  v-model="formData.status" readonly>
              <el-option value="0" label="正常">正常</el-option>
              <el-option value="1" label="报警">报警</el-option>
              <el-option value="2" label="故障">故障</el-option>
            </el-select>
        </el-form-item>

        <el-form-item label="旁路状态">
            <el-input type="text" v-model="formData.passStatus" readonly></el-input>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'unify',
  data() {
    return {
      src: require('./garrison.jpg'),
      dialogFormVisible: false,
      deviceList:[
        {
          deviceNumber:"1-003",
          deviceName:"1楼一号探测器",
          position:"1084,336,30",
          garrisonStatus: "0",
          status: "0",
          passStatus: ""
        },{
          deviceNumber:"1-007",
          deviceName:"1楼二号探测器",
          position:"847,585,30",
          garrisonStatus: 0,
          status: 0,
          passStatus: ""
        },{
          deviceNumber:"1-004",
          deviceName:"1楼三号探测器",
          position:"1329,472,30",
          garrisonStatus: 0,
          status: 0,
          passStatus: ""
        },
        {
          deviceNumber:"1-003",
          deviceName:"1楼四号探测器",
          position:"920,756,30",
          garrisonStatus: 0,
          status: 0,
          passStatus: ""
        },
        {
          deviceNumber:"1-006",
          deviceName:"1楼五号探测器",
          position:"1356,665,30",
          garrisonStatus: 0,
          status: 0,
          passStatus: ""
        },
        {
          deviceNumber:"1-005",
          deviceName:"1楼一号按钮",
          position:"1204,802,30",
          garrisonStatus: 0,
          status: 0,
          passStatus: ""
        }
      ],
      formData: {
        deviceNumber: "",
        deviceName: "",
        garrisonStatus: 0,
        status: 0,
        passStatus: ""

      }
    };
  },
  created() {},
  mounted() {
    var test = document.getElementById('wrap');
    test.onmousemove = function (e) {
      var x = e.layerX;
      var y = e.layerY;
      e.target.title = 'X is ' + x + ' and Y is ' + y;
    };
  },
  methods: {
    show(deviceNumber) {
      var deviceInfo=this.deviceList.find(item=>{
        return item.deviceNumber == deviceNumber
      })

      this.formData=deviceInfo
      this.dialogFormVisible=true
    }
  }
};
</script>
<style lang="scss" scoped>
.content-wrap {
  margin: 50px;
  width: 2000px;
  height: 1000px;
}
</style>
